<template>
  <div class="page-wrapper">
    <div class="login-container">
    <div class="logo">
      <img src="@/assets/Logo.png" alt="Logo" />
      <div class="identity-change">
        <router-link
        to="/admin-login"
        custom
        v-slot="{navigate}"
        >
        <button 
          :class="{ active: $route.path === '/admin-login' }"
          @click="navigate"
        >
          管理员登录
          </button>          
        </router-link>
        <router-link 
        to="/user-login" 
        custom 
        v-slot="{ navigate }"
        >
        <button 
          :class="{ active: $route.path === '/user-login' }"
          @click="navigate"
        >
          用户登录
        </button>
        </router-link>
      </div>
    </div>

    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <img src="@/assets/user.svg" class="icon" alt="手机号" />
        <input
          v-model="form.phone"
          type="text"
          placeholder="手机号"
          required
        />
      </div>

      <div class="form-group">
        <img src="@/assets/password.svg" class="icon" alt="密码" />
        <input
          v-model="form.password"
          type="password"
          placeholder="密码"
          required
        />
      </div>

      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>

      <button type="submit" class="login-btn" :disabled="isLoading">
        {{ isLoading ? '登录中...' : '登录' }}
      </button>

      <div class="remember-forgot">
        <div class="remember-me">
          <label class="toggle-switch">
            <input
              v-model="form.remember"
              type="checkbox"
            />
            <span class="slider"></span>
          </label>
          <label>记住密码</label>
        </div>
        <a href="#" class="forgot-password">忘记密码</a>
      </div>

      <div class="footer-links">
        <router-link to="/registration" class="create-account">创建账号</router-link>
        <a href="#" class="other-help">其他帮助</a>
      </div>
    </form>
    </div>
  </div>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, getCurrentUser } from '@/api'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const form = reactive({
  phone: '',
  password: '',
  remember: true
})

const isLoading = ref(false)
const errorMessage = ref('')

const handleSubmit = async () => {
  if (isLoading.value) return

  const phone = form.phone.trim()
  const password = form.password.trim()
  if (!phone || !password) {
    errorMessage.value = '请输入手机号和密码'
    return
  }

  isLoading.value = true
  errorMessage.value = ''

  try {
    const response = await login({ phone, password })
    const payload = response?.data
    if (!payload?.token) {
      throw new Error(response?.message || '登录失败，请检查账号或密码')
    }

    userStore.setAuthState({ token: payload.token, userInfo: null })

    try {
      const userInfoRes = await getCurrentUser()
      if (userInfoRes?.data) {
        userStore.setUserInfo(userInfoRes.data)
      }
    } catch (error) {
      console.warn('获取用户信息失败，将在后续页面重试', error)
    }

    form.password = ''
    router.push('/home')
  } catch (error) {
    console.error('用户登录失败', error)
    userStore.clearAuth()
    if (error?.code === 4003) {
      errorMessage.value = error?.message || '账号已被封禁，无法登录，请联系管理员'
    } else {
      errorMessage.value = error?.message || '登录失败，请稍后重试'
    }
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
@import '@/CSS/LoginPageUser.css';
</style>
